<template>
  <div class="betting-container">
    <m-header title="投注记录"></m-header>
    <tab class="betting-tabnav" custom-bar-width="1rem">
      <tab-item v-for="(item, index) in tabList" :key="index"
        :selected="tabIndex===index" @on-item-click="handleTabClick(item.state)">{{item.text}}</tab-item>
    </tab>
    <div class="betting-model">
      <div class="date-select" @click="showDateSelect">
        <div class="time">{{dateTimeVal | fmate}}</div>
        <div class="icon" :class="{'arrow': showDate}"></div>
      </div>
      <div class="betting-records">
        <scroller :on-refresh="refresh" :on-infinite="infinite" v-if="!isInit">
          <div class="record-list" v-if="Object.keys(allOrders).length" :data-length="allDataNum"
            :class="{'loaded-data': allDataNum < 5, 'loadmore-data': allDataNum < 10}">
            <!-- <div class="betting-cate" v-for="i in 3">
              <div class="time">12月24日</div>
              <div class="betting-item" v-for="i in 3">
                <div class="category">
                  <img class="typeimg" src="../../../assets/imgs/icon-football@2x.png" alt="">
                  <div class="types">
                    <div class="money">投注金额： <span>200.00</span></div>
                    <div class="type">投注方式： 普通订单</div>
                  </div>
                </div>
                <div class="status">未中奖</div>
                <div class="bonus">
                  <span class="ticket" v-if="false">已出票</span>
                  <span class="lose" v-if="false">-200.00</span>
                  <span class="win">+400.00</span>
                </div>
              </div>
            </div> -->
            <div class="betting-cate" v-for="(value, key) in allOrders" :key="key">
              <div class="time">{{key}}</div>
              <div class="betting-item" v-for="item in value" :key="item.order_sn"
                @click="handleGoDetail(item)">
                <div class="category">
                  <img class="typeimg" v-if="item.lottery_type==1" src="../../../assets/imgs/icon-football@2x.png" alt="">
                  <img class="typeimg" v-else src="../../../assets/imgs/icon-basketball@2x.png" alt="">
                  <div class="types">
                    <div class="money">投注金额： <span>{{item.total_price}}</span></div>
                    <div class="type">投注方式： {{item.order_type_name}}</div>
                    <!-- <div class="type">投注方式： {{item | fmts}}</div> -->
                  </div>
                </div>
                <div class="bonus-status">
                  <div class="status" :class="{'on': item.state==2}">{{item.state_name}}</div>
                  <!-- <div class="status">{{item.state | fmtOrderState}}</div> -->
                  <div class="bonus">
                    <!-- <span class="ticket">已出票</span> -->
                    <span class="win" v-if="item.state==2">+{{item.total_bonus_price}}</span>
                    <span class="lose" v-if="item.state==3">-{{item.total_bonus_price}}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </scroller>
          <div class="no-datas" v-if="!loading && !Object.keys(allOrders).length">
            <img src="../../../assets/imgs/icon-noattention@2x.png" alt="">
            <div class="desc">暂无数据</div>
          </div>
      </div>
    </div>
    <datetime
      :show="showDate"
      v-model="dateTimeVal"
      format="YYYY-MM"
      start-date="2018-01-01"
      :end-date="currentDate"
      @on-confirm="dateConfirm"
      @on-cancel="dateCancel"
      year-row="{value}年"
      month-row="{value}月"
    ></datetime>
  </div>
</template>

<script>
import { mapActions } from 'vuex';

export default {
  components: {
  },
  data () {
    return {
      pageNum: 1,
      isPull: false, // 下拉
      loading: true,
      isInit: false, // 重置滚动
      allDataNum: 0,
      tabIndex: 0,
      // tabList: ['全部', '中奖', '未中奖', '跟单'], // ['全部', '中奖', '未中奖', '追号', '跟单'],
      tabList: [
        {
          state: '',
          text: '全部'
        },
        {
          state: 1,
          text: '中奖'
        },
        {
          state: 2,
          text: '未中奖'
        },
        {
          state: 4,
          text: '跟单'
        }
      ],
      showDate: false,
      dateTimeVal: '',
      orderTypes: '', // 订单类型
      allOrders: {
        // '02月24日': [
        //   {
        //     'order_sn': 'D20190216629625',
        //     'order_type': '1',
        //     'lottery_type': '1',
        //     'total_price': '2.00',
        //     'total_bonus_price': '4.00',
        //     'state': '2',
        //     'order_type_name': '普通订单',
        //     'lottery_name': '竞彩足球',
        //     'state_name': '中奖'
        //   },
        //   {
        //     'order_sn': 'D20190216369717',
        //     'order_type': '1',
        //     'lottery_type': '1',
        //     'total_price': '2.00',
        //     'total_bonus_price': '0.00',
        //     'state': '1',
        //     'order_type_name': '普通订单',
        //     'lottery_name': '竞彩足球',
        //     'state_name': '已出票'
        //   },
        //   {
        //     'order_sn': 'D20190216897226',
        //     'order_type': '1',
        //     'lottery_type': '1',
        //     'total_price': '4.00',
        //     'total_bonus_price': '0.00',
        //     'state': '1',
        //     'order_type_name': '普通订单',
        //     'lottery_name': '竞彩足球',
        //     'state_name': '已出票'
        //   }
        // ]
      }
    }
  },
  computed: {
    currentDate () {
      const date = new Date();
      const year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      month = month < 10 ? '0' + month : month;
      day = day < 10 ? '0' + day : day;
      return `${year}-${month}-${day}`
    }
  },
  filters: {
    fmate (val) {
      const _date = val.split('-');
      return `${_date[0]}年${_date[1]}月`;
    },
    fmts (val) {
      switch (+val) {
        case 1: return '普通订单';
        case 2: return '跟单订单';
        default: return '普通订单'
      }
    },
    fmtOrderState (val) {
      switch (+val) {
        case 0: return '未支付';
        case 1: return '已付款';
        case 2: return '已中奖';
        case 3: return '未中奖';
        default: return '未支付'
      }
    }
  },
  created () {
    this.dateTimeVal = this.currentDate.substring(0, 7);
    this.tabIndex = this.$route.query.type * 1 || 0;
  },
  mounted () {
    // this.getDatas();
  },
  methods: {
    ...mapActions({
      orderList: 'mine/orderList',
      orderDetail: 'mine/orderDetail'
    }),
    refresh (done) { // 下拉
      this.isPull = true;
      this.pageNum = 1;
      this.loading = true;
      this.getDatas(done);
    },
    infinite (done) { // 上滑
      if (!this.isPull) {
        this.loading = true;
        this.getDatas(done);
      }
    },
    getDatas (done) {
      if (this.loading) {
        const params = {
          type: this.orderTypes,
          page: this.pageNum,
          size: 20,
          year_month: this.dateTimeVal.replace('-', '')
        }
        this.orderList(params).then(res => {
          this.loading = false;
          let listData = res.list || {}; // 新接口数据
          if (this.isInit) {
            this.isInit = false;
          }
          if (Object.keys(listData).length) {
            if (this.isPull) {
              this.isPull = false;
              this.allOrders = {};
            }
            this.pageNum += 1;
            let listDatas = this.allOrders; // 已经存在的数据
            let concatDatas = {};
            let datalen = 0;
            for (let i in listData) {
              if (listDatas[i]) {
                datalen += (listDatas[i].length + listData[i].length);
                concatDatas[i] = [...listDatas[i], ...listData[i]]
              } else {
                datalen += listData[i].length;
                concatDatas[i] = listData[i];
              }
            }
            this.allDataNum = datalen;
            this.allOrders = concatDatas;
            if (this.pageNum < res.page.total) {
              done && done(true);
            } else {
              done && done(2); ;
            }
          } else {
            done && done(2);
          }
          // if (res) {
          //   // res.list['03月23日'][0].order_type = '2';
          //   this.allOrders = res.list || [];
          // }
        });
      }
    },
    handleGoDetail (item) {
      if (+item.order_type === 1) { // order_type  1普通订单 2跟单订单
        this.$router.push({ path: `/betting/detail/${item.order_sn}` });
      } else {
        this.$router.push({ path: `/betting/details/${item.bill_id}` });
      }
    },
    handleTabClick (index) {
      this.tabIndex = index || 0;
      this.$router.replace({name: 'BettingRecord', query: { type: index || 0 }});
      this.orderTypes = index;
      this.allOrders = {};
      this.isInit = true;
      this.refresh();
    },
    showDateSelect () {
      this.showDate = true;
    },
    dateConfirm () {
      this.showDate = false;
      this.allOrders = {};
      this.isInit = true;
      this.refresh();
      // this.getDatas();
    },
    dateCancel () {
      this.showDate = false;
    }
  }
}
</script>
<style lang="less" scoped>
  .betting-container {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #f7f7f7;
    .betting-tabnav {
      position: fixed;
      top: 0.92rem;
      width: 100%;
    }
    .betting-model {
      width: 100%;
      position: absolute;
      // top: 1.72rem;
      // bottom: 0;
      top: 1.72rem;
      bottom: 0;
      .date-select {
        display: inline-flex;
        align-items: center;
        margin-left: 0.2rem;
        height: 0.66rem;
        line-height: 0.4rem;
        box-sizing: border-box;
        .time {
          font-size: 0.28rem;
          color: #333333;
        }
        .icon {
          width: 0.24rem;
          height: 0.13rem;
          margin-left: 0.05rem;
          background-size: 0.24rem 0.13rem;
          background-repeat: no-repeat;
          background-image: url('../../../assets/imgs/mine/icon-down@2x.png')
        }
        .arrow {
          transform: rotate(180deg);
          transition: transform 0.4s;
        }
      }
      .betting-records {
        position: absolute;
        top: 0.66rem;
        bottom: 0;
        width: 100%;
        overflow-y: auto;
        &::-webkit-scrollbar{
          display: none;
        }
        // .betting-list {
          .betting-cate {
            .time {
              line-height: 0.6rem;
              padding-left: 0.3rem;
              font-size: 0.24rem;
              color: #666666;
              background: #f7f7f7;;
            }
            .betting-item {
              display: flex;
              justify-content: space-between;
              align-items: center;
              height: 1.1rem;
              padding: 0 0.3rem;
              background: #ffffff;
              border-bottom: 1px solid #f7f7f7;
              .category {
                display: flex;
                .typeimg {
                  width: 0.72rem;
                  height: 0.72rem;
                }
                .types {
                  display: flex;
                  flex-direction: column;
                  justify-content: space-around;
                  margin-left: 0.2rem;
                  .money {
                    font-size: 0.24rem;
                    color: #333333;
                    span {
                      font-size: 0.28rem;
                    }
                  }
                  .type {
                    font-size: 0.24rem;
                    color: #666666;
                  }
                }
              }
              .bonus-status {
                width: 40%;
                height: 100%;
                // flex: auto;
                display: flex;
                align-items: center;
                justify-content: space-between;
              }
              .status {
                font-size: 0.24rem;
                color: #000000;
                &.on {
                  color: #D44743;
                }
              }
              .bonus {
                .ticket {
                  font-size: 0.24rem;
                  color: #333333;
                }
                .lose {
                  font-size: 0.28rem;
                  // font-weight: bold;
                  color: #333333;
                }
                .win {
                  font-size: 0.28rem;
                  // font-weight: bold;
                  color: #D44743;
                }
              }
            }
          }
        // }
        .no-datas {
          position: fixed;
          width: 100%;
          // top: 1.92rem;
          top: 2.4rem;
          bottom: 0;
          height: 100%;
          text-align: center;
          background: #ffffff;
          img {
            display: block;
            width: 4.15rem;
            height: 3.22rem;
            margin: 0 auto;
            padding-top: 0.8rem;
          }
          .desc {
            margin-top: 0.3rem;
            font-size: 0.22rem;
            color: #919191;
          }
        }
      }
    }
    .vux-datetime {
      display: none;
    }
  }

</style>
